<template>
 <div class="h-screen flex flex-col">
    <!-- 顶部导航 -->
    <header class="h-16 bg-white border-b flex items-center justify-between px-6 shadow-sm flex-shrink-0">
      <div class="flex items-center">
        <div class="ml-8 relative">
          <input type="text" placeholder="搜索..." 
                 class="pl-10 pr-4 py-2 border rounded-lg w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
          <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
        </div>
      </div>
      
      <div class="flex items-center space-x-6">
        <div class="relative">
          <i class="fas fa-bell text-gray-600 text-xl cursor-pointer"></i>
          <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">20</span>
        </div>
        <div class="flex items-center">
          <img src="../assets/Data.png" 
               class="w-8 h-8 rounded-full object-cover" alt="avatar">
          <span class="ml-2 text-gray-700">a经理</span>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <div class="flex-1 overflow-y-auto p-6 bg-gray-50 ">

      <!-- 数据 -->
      <div class="grid grid-cols-4 gap-6 mb-6 ">
        <div v-for="(stat, index) in statistics" :key="index" 
             class="bg-white rounded-lg p-6 shadow-sm">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500">{{ stat.label }}</p>
              <p class="text-2xl font-semibold mt-2">{{ stat.value }}</p>
            </div>
            <i :class="['fas', stat.icon, 'text-3xl', stat.color]"></i>
          </div>
          <div class="mt-4 text-sm">
            <span :class="stat.trend === '上升' ? 'text-green-500' : 'text-red-500'">
              <i :class="['fas', stat.trend === '上升' ? 'fa-arrow-up' : 'fa-arrow-down']"></i>
              {{ stat.percentage }}
            </span>
            <span class="text-gray-500 ml-2">较上周</span>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
       <!--ECharts插件实现数据可视化
           官网：https://echarts.apache.org/zh/index.html
       -->
      <div class="grid grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-lg p-6 shadow-sm">
          <h3 class="text-lg font-medium mb-4">销售趋势</h3>
          <div ref="salesChart" class="h-80"></div>
        </div>
        <div class="bg-white rounded-lg p-6 shadow-sm">
          <h3 class="text-lg font-medium mb-4">用户分布</h3>
          <div ref="userChart" class="h-80"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { onMounted } from 'vue';
import * as echarts from 'echarts';

//响应式变量
  const salesChart = ref<HTMLElement | null>(null);
  const userChart = ref<HTMLElement | null>(null);
  

const statistics = [
    { 
      label: '总销售额', 
      value: '¥ 126,560', 
      icon: 'fa-yen-sign', 
      color: 'text-blue-500',
      trend: '上升',
      percentage: '12%'
    },
    { 
      label: '总订单数', 
      value: '1,286', 
      icon: 'fa-shopping-bag', 
      color: 'text-green-500',
      trend: '上升',
      percentage: '8%'
    },
    { 
      label: '新增用户', 
      value: '256', 
      icon: 'fa-user-plus', 
      color: 'text-purple-500',
      trend: '下降',
      percentage: '5%'
    },
    { 
      label: '客单价', 
      value: '¥ 986', 
      icon: 'fa-dollar-sign', 
      color: 'text-yellow-500',
      trend: '上升',
      percentage: '3%'
    }
  ];
  
  onMounted(() => {
    // 销售趋势图表引入echats.js
    const salesChartInstance = echarts.init(salesChart.value as HTMLElement);
    salesChartInstance.setOption({
      animation: false,
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        areaStyle: {}
      }]
    });
  
    // 用户分布图表
    const userChartInstance = echarts.init(userChart.value as HTMLElement);
    userChartInstance.setOption({
      animation: false,
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '华东地区' },
            { value: 735, name: '华北地区' },
            { value: 580, name: '华南地区' },
            { value: 484, name: '西南地区' },
            { value: 300, name: '其他地区' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.6)'
            }
          }
        }
      ]
    });
  //自适应窗口尺寸
    window.addEventListener('resize', () => {
      salesChartInstance.resize();
      userChartInstance.resize();
    });
  });
</script>
<style  scoped>
.h-screen { height: 100vh; }  /* 确保容器占满视口 */
.overflow-y-auto { overflow-y: auto; } /* 内容溢出时显示滚动条 */

</style>